<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    radar: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      personalScore: null,
      platformPersonalScore: null
    }
  },
  watch: {
    radar: {
      handler(newName, oldName) {
        console.log(newName)
        this.personalScore = newName.personalScore
        this.platformPersonalScore = newName.platformPersonalScore
        this.initChart()
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: false
    }
  },
  mounted() {
    // this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const that = this
      this.chart = echarts.init(document.getElementById(this.id))

      this.chart.setOption({
        title: {
          text: ''
        },
        tooltip: {},
        legend: {
          data: ['电工会员评分', '系统平均评分']
        },
        radar: {
        // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: that.personalScore.code1, max: 100 },
            { name: that.personalScore.code1, max: 100 },
            { name: that.personalScore.code1, max: 100 },
            { name: that.personalScore.code1, max: 100 },
            { name: that.personalScore.code1, max: 100 }
          ],
          radius: 100
        },
        series: [{
          name: '电工会员评分 vs 系统平均评分',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: [that.personalScore.value1, that.personalScore.value2, that.personalScore.value3, that.personalScore.value4, that.personalScore.value5],
              name: '电工会员评分'
            },
            {
              value: [that.platformPersonalScore.value1, that.platformPersonalScore.value2, that.platformPersonalScore.value3, that.platformPersonalScore.value4, that.platformPersonalScore.value5],
              name: '系统平均评分'
            }
          ]
        }]
      })
    }
  }
}
</script>
